<template>
  <div class="honor-info">
    <el-card>
      <template #header>
        <div class="header">
          <h3>荣誉榜管理</h3>
          <div class="header-right">
            <el-button type="primary" @click="handleAddHonor">新增荣誉</el-button>
          </div>
        </div>
      </template>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-card>

    <!-- 新增荣誉对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增荣誉"
      width="600px"
    >
      <el-form
        ref="honorFormRef"
        :model="honorForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="学号" prop="studentNum" style="width: 280px" clearable>
          <el-input v-model="honorForm.studentNum" />
        </el-form-item>
        <el-form-item label="荣誉名称" prop="name" style="width: 280px" clearable>
          <el-input v-model="honorForm.name" />
        </el-form-item>
        <el-form-item label="荣誉级别" prop="level" style="width: 280px" >
          <el-select v-model="honorForm.level" placeholder="选择荣誉级别" clearable>
            <el-option
              v-for="item in honorLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker
            v-model="honorForm.applyTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择申请时间"
          />
        </el-form-item>
        <el-form-item label="颁发单位" prop="issuer">
          <el-input v-model="honorForm.issuer" />
        </el-form-item>
        <el-form-item label="荣誉描述" prop="description">
          <el-input
            v-model="honorForm.description"
            type="textarea"
            rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHonor(honorFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addHonor, exportHonor } from '../../../api/honor'

const dialogVisible = ref(false)
const honorFormRef = ref()

const honorForm = reactive({
  studentNum: '',
  name: '',
  level: '',
  time: '',
  applyTime: '',
  issuer: '',
  description: ''
})

const rules = {
  // studentId: [
  //   { required: true, message: '请输入学号', trigger: 'blur' },
  //   { pattern: /^\d+$/, message: '学号必须为数字', trigger: 'blur' }
  // ],
  // name: [
  //   { required: true, message: '请输入荣誉名称', trigger: 'blur' }
  // ],
  // level: [
  //   { required: true, message: '请选择荣誉级别', trigger: 'change' }
  // ],
  // issuer: [
  //   { required: true, message: '请输入颁发单位', trigger: 'blur' }
  // ],
  // applyTime: [
  //   { required: true, message: '请选择申请时间', trigger: 'change' }
  // ]
}

const honorLevels = [
  { label: '国家级', value: '国家级' },
  { label: '省级', value: '省级' },
  { label: '市级', value: '市级' },
  { label: '校级', value: '校级' }
]

const handleAddHonor = () => {
  dialogVisible.value = true
}


const submitHonor = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        await addHonor(honorForm)
        ElMessage.success('添加成功')
        dialogVisible.value = false
        // 重置表单
        formEl.resetFields()
      } catch (error) {
        console.log(error)
        ElMessage.error('添加失败：' + error)
      }
    }
  })
}
</script>

<style scoped>
.honor-info {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-right {
  display: flex;
  gap: 10px;
}
</style>
